<template>
    <div class="decoration">
        <dv-decoration-8 style="width:400px;height:50px;" />
        <dv-decoration-3 style="width:400px;height:30px;" class="left-bottom"/>
        <div class="top-center">
            <h1>中国历年农产品产量可视化</h1>
            <dv-decoration-5 style="width:1000px;height:50px;margin-top: 40px;" />"
        </div>
        <dv-decoration-8 :reverse="true" style="width:400px;height:50px;" />
        <dv-decoration-3 style="width:400px;height:30px;" class="right-bottom"/>
    </div>
</template>
<script setup>

</script>
<style scoped>
    .decoration{
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        flex-shrink: 0;
    }
    h1{
        position:absolute;
        top:15px;
        left: 667px;
        color: white;
        font-size:30px;
        font-family: 楷体;

    }
    .left-bottom{
        position:absolute;
        left:0;
        top: 60px;
    }
    .right-bottom{
        position:absolute;
        right:0;
        top: 60px;
    }
</style>